<template>
	<view class="swiper">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/1.jpg"></image></view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/2.jpg" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="notice" @click="go('notice')">
			<view class="noticeIcon iconfont icon-gonggao"></view>
			<text>关注公众号</text>
		</view>
		<view class="menu">
			<view class="menu-w" v-for="i in item" :key="i.url" @click="go(i.url)">
				<view class="menu-item">
					<view class="icon iconfont" :class="i.icon"></view>
					<text>{{i.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				item:[
					{
						text:"快递代取",
						icon:"icon-kuaididaiqu",
						url:"express"
					},
					{
						text:"校园跑腿",
						icon:"icon-xiaoyuanpaotui",
						url:"errands"
					},
					{
						text:"快递代寄",
						icon:"icon-tianjiabanjia",
						url:"delivery"
					},
					{
						text:"租借服务",
						icon:"icon-icon-zujiefuwu",
						url:"lease"
					},
					{
						text:"游戏陪玩",
						icon:"icon-yuleshebei",
						url:"game"
					},
					{
						text:"帮我送",
						icon:"icon-bangwosonghuo",
						url:"carry"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			go(i){
				let link = `../${i}/${i}`
				console.log(link)
				uni.navigateTo({
					url: link
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #f2f2f2;
	}
	image{
		width: 100%;
	}
	.notice{
		display: flex;
		box-sizing: border-box;
		padding: 0 20rpx;
		height: 60rpx;
		align-items: center;
		background-color: #fff;
		margin-top: 30rpx;
	}
	.notice .noticeIcon{
		padding-right: 20rpx;
	}
	.notice text{
		font-size: 28rpx;
	}
	.menu{
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		font-size: 28rpx;
		
	}
	.menu-w{
		width: 33.33%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;
	}
	.menu-item{
		width: 140rpx;
		height: 140rpx;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 60rpx;
	}
	.menu-item .icon{
		width: 100rpx;
		height:	100rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 60rpx;
		margin-top: -60rpx;
		background-color:#6a98ca;
		box-shadow: 0rpx 4rpx 4rpx 4rpx #8d8d8d;
		color: #fff;
	}
	
	.menu-item text{
		font-size: 24rpx;
		margin-top: 20rpx;
		color: #6a98ca;
	}
</style>
